<template>
  <div class="paymentSlips-box">
    <!-- 外协商申请付款单 -->
    <serchForm
      :Form="inventoryForm"
      :FormLabel="inventoryFormLabel"
      @onSearch="onSearch"
    />
    <div class="function-box">
      <el-button
        class="createBtn"
        @click="createPaymentSlips"
      ><i class="iconfont icon-plus-square"></i>
        新增
      </el-button>
      <el-button
        class="reviseBtn"
        @click="revisePaymentSlips"
      ><i class="iconfont icon-xiugai"></i>
        修改
      </el-button>
      <el-button class="exportBtn"><i class="iconfont icon-shanchu"></i>
        删除
      </el-button>
      <el-button
        class="visitBtn"
        @click="updateInfo"
        v-show="false"
      ><i class="iconfont icon-daochu"></i>
        导出
      </el-button>
    </div>
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="total"
      :page="page"
      :limit="limit"
      :pageSize="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      @tableDetail="tableDetail"
    />
    <paymentSlipsCom
      @popUpsFlase="popUpsFlase"
      :PopData="PopData"
      :popTitle="popTitle"
      :disabled="disabled"
      v-if="flag"
      :defindFlag="defindFlag"
    />
  </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import paymentSlipsCom from './components/paymentSlipsCom';
import { ref } from 'vue';
import { updatePopHook } from '@/hook/setPop/updatePop.js'
let updatePop = updatePopHook()
const idActive = 'outsourcingId'
let popTitle = ref('新增外协付款申请单')
let disabled = ref(false)
// 弹窗
let flag = ref(false)
// 详情控制变量
let defindFlag = ref(true)
// 修改详情回显数据弹窗
let PopData = ref([])
// 存储勾选框的对象
let multipleSelection = ref([])

// 表单绑定属性名
let inventoryForm = ref(
  {
    outsourcingId: '',      // 外协商编号
    outsourcingName: '',    // 外协商名称
    orderId: '',             // 单据编号
    projectName: '',      // 项目名称
    applicationPerson: '',      // 申请人
  }
)
// 表单数据标题
let inventoryFormLabel = ref([

  {
    name: 'outsourcingId',
    label: '外协商编号',
  },
  {
    name: 'outsourcingName',
    label: '外协商名称'
  },
  {
    name: 'orderId',
    label: '单据编号'
  },
  {
    name: 'projectName',
    label: '项目名称'
  },
  {
    name: 'applicationPerson',
    label: '申请人',
    type: 'select',
    client: [
      {
        label: '虾米',
        value: '1'
      },
      {
        label: '杨梅',
        value: '2'
      },
    ]
  },

])
// 查找
const onSearch = (v) => {
  console.log(v);
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 每页显示条目个数
const pageSize = ref([10, 20, 30, 50])
// 总条目数   pageSize 加 1
let total = ref(50)
// 当前页数
let page = ref(1)
// 条数
let limit = ref(20)



// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'outsourcingId',
    label: '外协商编号',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'orderId',
    label: '单据编号',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'outsourcingName',
    label: '外协商名称',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'outsourcingType',
    label: '外协商类别',
    minwidth: 100
  },
  {
    prop: 'outsourcingDate',
    label: '外协商日期',
    minwidth: 100
  },
  {
    prop: 'projectName',
    label: '项目名称',
    minwidth: 100
  },
  {
    prop: 'outsourcingContent',
    label: '外协内容',
    minwidth: 100
  },
  {
    prop: 'costType',
    label: '成本类别',
    minwidth: 100
  },
  {
    prop: 'paymentMoney',
    label: '付款金额',
    colorClassName: 'activeColor',
    minwidth: 100

  },
  {
    prop: 'paymentMethods',
    label: '付款方式',
    minwidth: 100
  },
  {
    prop: 'contractId',
    label: '合同编号',
    minwidth: 100
  },
  {
    prop: 'applicationPerson',
    label: '申请人'
  },
  {
    prop: 'deptName',
    label: '部门'
  },
  {
    prop: 'applicationDate',
    label: '申请日期',
    minwidth: 100
  },
  {
    prop: 'approver',
    label: '审批人'
  },
  {
    prop: 'auditStatus',
    label: '审核状态'
  },
  {
    prop: 'remarks',
    label: '备注'
  },
])
// 表格数据内容
let inventoryTableData = ref([
  {
    outsourcingId: '0',
    orderId: '0',
    outsourcingName: '珠玑',
    outsourcingType: '安装',
    outsourcingDate: '2024-05-11',
    projectName: '赊店门头',
    outsourcingContent: '安装门头',
    costType: '日结',
    paymentMoney: '500',
    paymentMethods: '现金',
    contractId: '1',
    applicationPerson: '虾米',
    deptName: '信息化',
    applicationDate: '2024-1-12',
    approver: '杨梅',
    auditStatus: '审核通过',
    remarks: 'goods',
  },
  {
    outsourcingId: '1',
    orderId: '1',
    outsourcingName: '珠玑',
    outsourcingType: '安装',
    outsourcingDate: '2024-05-11',
    projectName: '赊店门头',
    outsourcingContent: '安装门头',
    costType: '日结',
    paymentMoney: '500',
    paymentMethods: '付款方式',
    contractId: '1',
    applicationPerson: '虾米',
    deptName: '信息化',
    applicationDate: '2024-1-12',
    approver: '杨梅',
    auditStatus: '审核通过',
    remarks: 'goods',
  },
  {
    outsourcingId: '2',
    orderId: '2',
    outsourcingName: '珠玑',
    outsourcingType: '安装',
    outsourcingDate: '2024-05-11',
    projectName: '赊店门头',
    outsourcingContent: '安装门头',
    costType: '日结',
    paymentMoney: '500',
    paymentMethods: '付款方式',
    contractId: '1',
    applicationPerson: '虾米',
    deptName: '信息化',
    applicationDate: '2024-1-12',
    approver: '杨梅',
    auditStatus: '审核通过',
    remarks: 'goods',
  },


  {
    outsourcingId: '3',
    orderId: '3',
    outsourcingName: '珠玑',
    outsourcingType: '安装',
    outsourcingDate: '2024-05-11',
    projectName: '赊店门头',
    outsourcingContent: '安装门头',
    costType: '日结',
    paymentMoney: '500',
    paymentMethods: '付款方式',
    contractId: '1',
    applicationPerson: '虾米',
    deptName: '信息化',
    applicationDate: '2024-1-12',
    approver: '杨梅',
    auditStatus: '审核通过',
    remarks: 'goods',
  },
  {
    outsourcingId: '4',
    orderId: '4',
    outsourcingName: '珠玑',
    outsourcingType: '安装',
    outsourcingDate: '2024-05-11',
    projectName: '赊店门头',
    outsourcingContent: '安装门头',
    costType: '日结',
    paymentMoney: '500',
    paymentMethods: '付款方式',
    contractId: '1',
    applicationPerson: '虾米',
    deptName: '信息化',
    applicationDate: '2024-1-12',
    approver: '杨梅',
    auditStatus: '审核通过',
    remarks: 'goods',
  },
  {
    outsourcingId: '5',
    orderId: '5',
    outsourcingName: '珠玑',
    outsourcingType: '安装',
    outsourcingDate: '2024-05-11',
    projectName: '赊店门头',
    outsourcingContent: '安装门头',
    costType: '日结',
    paymentMoney: '500',
    paymentMethods: '付款方式',
    contractId: '1',
    applicationPerson: '虾米',
    deptName: '信息化',
    applicationDate: '2024-1-12',
    approver: '杨梅',
    auditStatus: '审核通过',
    remarks: 'goods',
  },

])

// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
  console.log(v);
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  console.log(v);
  limit.value = v.page.limit
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v);
}
// 新增外协付款申请单弹窗
const createPaymentSlips = () => {
  flag.value = true
  disabled.value = false
  popTitle.value = '新增外协付款申请单'
}
// 修改外协付款申请单弹窗
const revisePaymentSlips = () => {
  updatePop(multipleSelection, flag, popTitle, '修改外协付款申请单', disabled)
}
// 详情双击行
const tableDetail = (props) => {
  disabled.value = true
  flag.value = true
  popTitle.value = '外协付款申请单详情信息'
  defindFlag.value = false
  PopData.value = props
}
// 关闭弹窗
const popUpsFlase = (v) => {
  flag.value = v
  defindFlag.value = true
}
</script>
<style scoped lang='scss'>
.paymentSlips-box {
  padding: 16px;

  .function-box {
    display: flex;
    align-items: center;
  }
}
</style>
